<template>
    <div class="bigbox">
        <template v-for="(item,index) in shuju" :key=item.username>
            <div class="smallbox" >
                <div class="s_photo" >
                    <img @click="tiaozhuan" :src=item.img>
                </div>
                <div class="s_show">
                    <div style="line-height:44px">{{item.username}}关注了你</div>
                    <div style="color:#999999; font-size:14px">{{item.messagetime}}</div>
                </div>
                <div class="s_time">
                    <van-button @click="but(item,index)" color="linear-gradient(to right, #ff6034, #ee0a24)" size="small">
                        <span style="margin-left:12.5px;margin-right: 12.5px;" v-if="item.isFollow==false">
                            +关注
                        </span>
                        <span style="margin-left:5px;margin-right: 5px;" v-else>
                            关注成功
                        </span>
                    </van-button>
                </div>
            </div>
        </template>
    </div>
</template>
<script lang="ts" setup>
    import { ref } from 'vue';
    import { getfollowmelist } from "@/api/messagelist"
    import {useRouter} from 'vue-router';
    const router = useRouter();
    let shuju=ref([])
    getfollowmelist().then((res:any)=>{
        // console.log(res.data.data)
        shuju.value=res.data.data
    })
    const but=(panduan:any,numb:number)=>{
        if(panduan.isFollow==true){
            panduan.isFollow=false
        }else if(panduan.isFollow==false){
            panduan.isFollow=true
        }
        // console.log(panduan)
        // console.log(numb)
    }
    const tiaozhuan=()=>{
        router.push({
            path:'/minegoodman/minegoodmanhome'
        })
    }
</script>
<style scoped>
    .bigbox{
        width: 100%;
        height: 650px;
        background-color: white;
        color: black;
        overflow-y: auto;

    }
    .smallbox{
        display: flex;
        height: 80px;
        border-bottom: 1px solid rgb(222, 221, 221);
    }
    .s_photo .s_show .s-time{
        height: 100%;
    }
    /* 头像 */
    .s_photo{
        flex: 1;
        text-align: center;
        height: 100%;
    }
    img{
        width:50px;
        height:50px;
        border-radius: 50px;
        margin-top: 10px;
    }
    /* 名字+最后一条记录*/
    .s_show{
        flex: 3.2;
    }
    .s_show div{
        height: 44%;
        /* border: 1px solid red; */
    }
    /* 显示最后一条记录的事件 */
    .s_time{
        flex: 1.2;
        line-height: 70px;
        font-size: 13px;
    }
</style>